<!-- 考试模块-在线考试 -->
<template >
  <page-layout>
    <!-- 列表页面 -->
    <a-row :gutter="[10, 10]">
      <!-- 查询条件 -->
      <a-col :span="24">
        <a-card>
          <pro-query
            :searchParam="searchParam"
            @on-search="search"
          >
            <template #test="{ data }">
              <a-input v-model:value="data.test" type="text"/>
            </template>
          </pro-query>
        </a-card>
      </a-col>
      <!-- 用户列表 -->
      <a-col :span="24">
        <a-card>
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :operate="operate"
            :param="state.param"
            :pagination="pagination">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
  <a-modal width="1000px"   v-model:visible="visible" title="考试明细" @ok="handleOk" :footer="null">
    <a-card v-for="item in paperList" :key="item">
      <a-descriptions>
        <a-descriptions-item label="考试时间">{{item.createTime}}</a-descriptions-item>
        <a-descriptions-item label="考试用时">{{item.userTime}} 分钟</a-descriptions-item>
        <a-descriptions-item label="考试得分">{{ item.userScore }}</a-descriptions-item>
        <a-descriptions-item label="是否合格">{{item.userScore > item.qualifyScore ?'是':'否'}}</a-descriptions-item>
        <a-descriptions-item label="考试状态">{{ item.examState}}</a-descriptions-item>
      </a-descriptions>
      <a-divider />
    </a-card>
  </a-modal>
</template>

<script>
import {myPaging, onlinePaging, paging, usersPaging} from "@/api/module/exam.js";
import { reactive, ref, toRaw} from 'vue';
import { useRouter } from 'vue-router';
import {useRoute} from 'vue-router';

export default {
  components: {
    // info,
  },
  setup() {
    // 获取父组件传过来的ID
    const routers = useRoute();
    const id = JSON.parse(routers.query.id);
    // 详情框
    const visible = ref(false);
    const paperList = ref([]);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = e => {
      console.log(e);
      visible.value = false;
    };


    const tableRef = ref();
    const router = useRouter();


    /// 查询用户
    const fetch = async (param) => {
      let dataParam = {
        "current": 1,
        "size": 10,
        "params": {
          "examId": id,
          "realName": ""
        },
      }
      var response = await usersPaging(dataParam);
      return {
        total: response.data.total,
        data: response.data.records,
      };
    };


    /// 行操作
    const operate = [
      { label: "考试明细", event: function (record) {
          const param = {
            current:1,
            size:record.tryCount,
            params:{
              userId:record.userId,
              examId:record.examId,
            },
          }
          paging(param).then((response)=>{
            paperList.value = response.data.records
            console.log("详情列表+",response.data)
          });
          visible.value = true;
        }},
    ];
    /// 考试类型转换格式
    const passedFormat = [{label: "通过", value: true}, {label: "未通过", value: false}];
    ///配置
    const columns = [
      {dataIndex: "realName", key: "realName", title: "人员"},
      {dataIndex: "tryCount", key: "tryCount", title: "考试次数" },
      {dataIndex: "maxScore", key: "maxScore", title: "最高分" },
      {dataIndex: "passed", key: "passed", title: "是否通过",conver: passedFormat},
      {dataIndex: "updateTime", key: "updateTime", title: "最后考试时间"},
    ];

    /// 分页参数
    const pagination = {current: 1, size: 10}

    /// 外置参数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      record: {},
    })

    /// 查询参数  //需要改
    const searchParam = [
      {key: "name", type: "input", label: "开放类型"},
      {key: "code", type: "input", label: "搜索考试名称"},
    ]

    /// 选择操作
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    /// 查询操作
    const search = function (value) {
      state.param = value;
      tableRef.value.reload();
    }


    return {
      state,
      fetch,
      search,
      toolbar,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,
      paperList,

      tableRef,
      visible,
      showModal,
      handleOk,
    };
  },
};
</script>
